<script setup lang="ts">
import { microApps } from "@/config/microApps";
const microappChange = (url: string) => {
  history.pushState(null, url, url);
};
</script>

<template>
  <div style="display: flex">
    <a
      target="_blank"
      @click="microappChange(app.activeRule)"
      class="nav"
      v-for="app in microApps"
      :key="app.name"
    >
      <img :src="app.icon" class="logo" alt="Vite logo" />
      {{ app.name }}
    </a>
    <!-- <a
      target="_blank"
      @click="microappChange('/main/pro-app-react')"
      class="nav"
    >
      <img src="@/assets/react.svg" class="logo" alt="Vite logo" />
      /pro-app-react
    </a>
    <a
      target="_blank"
      @click="microappChange('/main/pro-app-vue')"
      class="nav"
    >
      <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
      /pro-app-vue
    </a> -->
  </div>
  <div id="main-Container">
    <RouterView> microapp </RouterView>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.nav {
  display: flex;
  flex-direction: column;
}
</style>
